<template>
	<div class="home">
		<table class="plane" :style="tdStyle" @mouseup="tableMouseup">
			<tr v-for="i in columnNum" :key="i">
				<td v-for="j in rowNum" :key="j" :data-key="`${i}_${j}`"
					@mousemove.prevent="tdMove"></td>
			</tr>
		</table>
		<div :class="{layers:true,select:drawMod==1}" :style="`height:${1000 / rowNum * columnNum}px`">
			<div v-for="(item,i) in layers" :key="i" :class="`layer layer-${item.type}${item.lock?' lock':''}`"
				@click="layerClick(i)"
				:style="{
					left:item.x+'px',
					top:item.y+'px',
					width:item.width+'px',
					height:item.height+'px',
					background:areas.find(a=>a.id==item.type)[item.active],
					borderColor:areas.find(a=>a.id==item.type).color
				}">
				<div v-if="item.active=='act'" class="name">{{item.name}}</div>
				<div v-if="item.active=='act'" class="btn">
					<button @click="delLayer(i)">删除</button>
					<button @click="setName(i)">修改名称</button>
					<button @mousedown.prevent="lockLayer(i)" 
							@mouseup.prevent="lockLayer(i,true)">锁定</button>
				</div>
			</div>
			
			<div v-if="curLayer" :class="`layer curLayer layer-${curLayer.type}`"
				:style="{
					left:curLayer.x+'px',
					top:curLayer.y+'px',
					width:curLayer.width+'px',
					height:curLayer.height+'px',
					borderColor: areas.find(a=>a.id==drawArea).color
				}">
				<div v-if="showCurLayerBtn" class="btn">
					<button @click="cacheLayer">保存</button>
					<button @click="cancelCurLayer">取消</button>
				</div>
			</div>
		</div>
		<div class="form">
			<div class="form-item">
				<label>仓库长/米：</label>
				<input :value="chang" @blur="chang = $event.target.value" type="text"/>
			</div>
			<div class="form-item">
				<label>仓库宽/米：</label>
				<input :value="kuan" @blur="kuan = $event.target.value" type="text"/>
			</div>
			<div class="form-item">
				<label>网格宽/米：</label>
				<input :value="gridWidth" @blur="gridWidth = $event.target.value" type="text"/>
			</div>
			<div class="form-item">
				<label>绘图模式：</label>
				<select v-model="drawMod">
					<option value="0">绘制</option>
					<option value="1">点选</option>
				</select>
			</div>
			<div class="form-item">
				<label>绘制区块：</label>
				<select v-model="drawArea">
					<option value="0">库区</option>
					<option value="1">便道</option>
					<option value="2">库位</option>
				</select>
			</div>
		</div>
		<div class="legend">
			<div class="l" v-for="(item,i) in areas" :key="i">
				<span :style="`display:inline-block;border:2px solid;border-color: ${item.color};width:30px;height:15px;`"></span>
				<span>{{item.name}}</span>
			</div>
		</div>
		<div class="topBtns">
			<button @click="unlockAll">一键解锁</button>
			<button @click="clearAll">一键清除</button>
			<button @click="save">保存仓库</button>
		</div>
	</div>
</template>

<script>
	export default {
		name: "Home",
		data() {
			return {
				chang: 300,
				kuan: 100,
				gridWidth:10,
				mousedown:false,
				drawMod:"0",
				drawArea:"0",
				areaColors:["yellow","green","red"],
				areas:[
					{
						id:"0",
						name:"库区",
						color:"#ffb600",
						act:"rgba(255,182,0,.18)",
						unact:"transparent"
					},
					{
						id:"1",
						name:"便道",
						color:"green",
						act:"#00800024",
						unact:"transparent"
					},
					{
						id:"2",
						name:"库位",
						color:"red",
						act:"#ff000029",
						unact:"transparent"
					}
				],
				layers:[],
				curLayer:null,
				beginTdKey:null,
				endTdKey:null,
				oldkey:null,
				showCurLayerBtn:false,
			}
		},
		mounted(){
			document.onmousedown = ()=>{
				this.mousedown = true
			}
			document.onmouseup = ()=>{
				this.mousedown = false
				this.oldkey = null
				this.beginTdKey = null
				this.endTdKey= null
			}
		},
		watch:{
			drawMod(val){
				if(val == "0"){
					this.layers.find(l=>l.active=="act").active = "unact"
				}
			}
		},
		computed:{
			rowNum(){
				let { chang, gridWidth } = this
				return parseInt(chang/gridWidth)
			},
			columnNum(){
				let { kuan, gridWidth } = this
				return parseInt(kuan/gridWidth)
			},
			gridPx(){
				return parseInt(1000 / this.rowNum)
			},
			tdStyle(){
				let {drawMod,gridPx } = this
				const cursors = ["crosshair","auto"]
				return{
					"--tdHeight":gridPx+"px",
					cursor:cursors[drawMod]
				}
			}
		},
		methods:{
			tableMouseup(){
				if(this.curLayer) this.showCurLayerBtn = true
			},
			tdMove({target}){
				if(this.mousedown && !this.showCurLayerBtn){
					if(!this.beginTdKey){
						this.beginTdKey = target.dataset.key
					}
					this.endTdKey = target.dataset.key
					
					const {drawMod,oldkey,gridPx,drawArea} = this
					let beginkeys = this.beginTdKey.split("_")
					let endkeys = this.endTdKey.split("_")
					
					if(oldkey!=target.dataset.key){
						if(drawMod=="0"){
							// 绘制
							let width=(endkeys[1]-beginkeys[1]+1) * gridPx + 1,
								height=(endkeys[0]-beginkeys[0]+1) * gridPx + 1,
								x = gridPx * (beginkeys[1]-1),
								y = gridPx * (beginkeys[0]-1)
							if(width>1 && height>1){
								this.curLayer = {
									id:this.layers.length+1,
									type:drawArea,
									active:"unact",
									lock:false,
									x,
									y,
									width,
									height,
								}
							}else{
								this.curLayer = null
							}
						}
						this.oldkey = target.dataset.key
					}
				}
			},
			cacheLayer(){
				let {areas,curLayer} = this
				
				var area = areas.find(a=>a.id==curLayer.type)
				
				var pmpt = prompt(`请输入${area.name}名称`,area.name+Date.now())
				
				if(!pmpt){
					alert("名称必须输入！")
					return
				}
				
				this.curLayer.name = pmpt
				this.layers.push(this.curLayer)
				this.showCurLayerBtn = false
				this.curLayer = null
			},
			cancelCurLayer(){
				this.showCurLayerBtn = false
				this.curLayer = null
			},
			layerClick(index){
				if(this.layers.find(l=>l.active=="act")){
					this.layers.find(l=>l.active=="act").active = "unact"
				}
				this.layers[index].active = "act"
			},
			delLayer(index){
				this.layers.splice(index,1)
			},
			setName(index){
				var cur = Object.create(this.layers[index])
				var pmpt = prompt(`请输入名称`,cur.name)
				
				if(!pmpt){
					alert("名称必须输入！")
					return
				}else if(pmpt==cur.name){
					return
				}else{
					cur.name = pmpt
					this.$set(this.layers,index,cur)
				}
			},
			lockLayer(index,type){
				var cur = JSON.parse(JSON.stringify(this.layers[index]))
				if(type){
					cur.active = "unact"
				}else{
					cur.lock = !cur.lock
				}
				this.$set(this.layers,index,cur)
			},
			unlockAll(){
				var copyLayers = JSON.parse(JSON.stringify(this.layers))
				copyLayers.forEach((ly,index)=>{
					if(ly.active == "act"){
						ly.active = "unact"
						this.$set(this.layers,index,ly)
					}
					else if(ly.lock){
						ly.lock = false
						this.$set(this.layers,index,ly)
					}
				})
				alert("已解锁全部区域")
			},
			clearAll(){
				let a = confirm("确定要清除所有已绘制区吗？")
				if(a){
					this.layers = []
				}
			},
			save(){
				console.log(this.layers)
			}
		}
	};
</script>

<style lang="scss" scoped>
	table.plane {
		margin-top: 42px;
		margin-left: 10px;
		border-collapse: collapse;
		/* 边框合并属性 */
		text-align: center;
		td {
			border: 1px solid #cad9ea;
			color: #666;
			width: var(--tdHeight);
			height: var(--tdHeight);
		}

		// tr:nth-child(odd) {
		// 	background: #fff;
		// }

		// tr:nth-child(even) {
		// 	background: #F5FAFA;
		// }
	}
	
	.layers{
		position: absolute;
		top: 42px;
		left: 10px;
		width: 1000px;
		pointer-events: none;
		&.select{
			pointer-events: all;
			.btn{
				width: 160px !important;
				left: auto !important;
				right: -165px !important;
				bottom: -2px !important;
				z-index: 999;
			}
		}
		.layer{
			position: absolute;
			border: 2px solid;
			.name{
				font-size: 14px;
				position: absolute;
				bottom: -20px;
				white-space: nowrap;
			}
			.btn{
				position: absolute;
				left:0;
				bottom: -30px;
				display: flex;
				width: 98px;
				justify-content: space-between;
				pointer-events: all;
				button{
					cursor: pointer;
				}
			}
			&.lock{
				pointer-events: none;
			}
		}
	}

	.form {
		position: absolute;
		left: 1120px;
		top: 20px;
	}
	.legend{
		position: absolute;
		left: 1020px;
		top: 20px;
		.l{
			display: flex;
			align-items: center;
			line-height: 1.6;
			width: 70px;
			justify-content: space-between;
		}
	}
	.topBtns{
		position: absolute;
		right: calc(100% - 1011px);
		top: 10px;
		button{
			margin-right: 10px;
		}
	}
</style>
